<template>
  <div class="inpatientWard">
    <div class="content">
      <div class="streaming" @click="liveMessage">
        <div class="one">
          <img src="../../../../images/live/3-1live.jpg" alt="" />
        </div>
        <div class="two">
          <span>A103</span>
        </div>
      </div>
      <div class="streaming" @click="liveMessage">
        <div class="one">
          <img src="../../../../images/live/3-2live.jpg" alt="" />
        </div>
        <div class="two">
          <span>A104</span>
        </div>
      </div>
      <div class="streaming" @click="liveMessage">
        <div class="one">
          <img src="../../../../images/live/3-3live.jpg" alt="" />
        </div>
        <div class="two">
          <span>A105</span>
        </div>
      </div>
      <div class="streaming" @click="liveMessage">
        <div class="one">
          <img src="../../../../images/live/3-4live.jpg" alt="" />
        </div>
        <div class="two">
          <span>A106</span>
        </div>
      </div>
    </div>
    <div :class="mainPart_paging">
      <a-pagination
        @change="pagingChange"
        v-model="current"
        :total="totalCount"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      totalCount: 50,
      mainPart_paging:'mainPart_paging',
    };
  },
  mounted(){
    let _this = this;
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.mainPart_paging='mainPart_paging';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.mainPart_paging='mainPart_paging1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.mainPart_paging='mainPart_paging';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.mainPart_paging='mainPart_paging1';
    }
  },
  methods: {
    pagingChange(page, pageSize) {
      this.current = page;
    },
    liveMessage(){
        this.$router.push('/liveMessage')
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .streaming {
    width: 367px;
    height: 400px;
    border-radius: 10px;
    margin-left: 30px;
    position: relative;
    margin-bottom: 30px;
    cursor: pointer;
    .one {
      img {
        width: 367px;
        height: 400px;
        border-radius: 10px;
      }
    }
    .two {
      position: absolute;
      top: 0;
      left: 0;
      width: 367px;
      height: 30px;
      background-color: rgba(52, 63, 75, 0.7);
      border-radius: 10px 10px 0px 0px;
      span {
        font-size: 18px;
        color: #ffffff;
        line-height: 30px;
      }
    }
  }
}
.mainPart_paging,.mainPart_paging1 {
  width: 100%;
  padding-bottom: 30px;
}
</style>

<style>
.inpatientWard .mainPart_paging .ant-pagination-prev .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-left-initial.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging1 .ant-pagination-prev .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-left-initial1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging .ant-pagination-prev .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-left-XF.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging1 .ant-pagination-prev .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-left-XF1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging .ant-pagination-next .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-right-initial.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging1 .ant-pagination-next .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-right-initial1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging .ant-pagination-next .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-right-XF.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging1 .ant-pagination-next .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-right-XF1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.inpatientWard .mainPart_paging .ant-pagination-item,
.inpatientWard .mainPart_paging .ant-pagination-item a,
.inpatientWard .mainPart_paging1 .ant-pagination-item,
.inpatientWard .mainPart_paging1 .ant-pagination-item a {
  background-color: none !important;
  border-radius: 50% !important;
  border: none !important;
}
.inpatientWard .mainPart_paging .ant-pagination-item,
.inpatientWard .mainPart_paging1 .ant-pagination-item{
  background: none !important;
}
.inpatientWard .mainPart_paging .ant-pagination-item a,
.inpatientWard .mainPart_paging1 .ant-pagination-item a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #5d77ad !important;
}
.inpatientWard .mainPart_paging .ant-pagination-item-active,
.inpatientWard .mainPart_paging .ant-pagination-item-active a {
  background-color: #5d77ad !important;
  color: #fff !important;
}
.inpatientWard .mainPart_paging1 .ant-pagination-item-active,
.inpatientWard .mainPart_paging1 .ant-pagination-item-active a {
  background-color: #2091bd !important;
  color: #fff !important;
}
.inpatientWard .mainPart_paging .anticon,
.inpatientWard .mainPart_paging1 .anticon {
  display: none !important;
}
</style>